<template>
	<div class="user-service bg-white mx-[20rpx] mt-[20rpx] rounded-lg p-[30rpx]" v-if="content.enabled">
		<div v-if="content.title" class="title font-medium text-lg">
			<div>{{ content.title }}</div>
		</div>
		<!-- 横排 -->
		<div v-if="content.style == 1" class="grid grid-cols-4 gap-x-6">
			<div v-for="(item, index) in content.data" :key="index" class="flex flex-col items-center pt-[40rpx]"
				@click="handleClick(item)">
				<u-image width="68" height="68" :src="getImageUrl(item.image)" alt="" />
				<div class="mt-2 text-xs">{{ item.name }}</div>
			</div>
		</div>
		<!-- 竖排 -->
		<div v-if="content.style == 2">
			<div v-for="(item, index) in content.data" :key="index" class="flex items-center h-[100rpx] px-[24rpx]"
				@click="handleClick(item)">
				<u-image width="52" height="52" :src="getImageUrl(item.image)" alt="" />
				<div class="ml-[20rpx] flex-1">{{ item.name }}</div>
				<div class="text-muted">
					<u-icon name="arrow-right" />
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { useAppStore } from '@/stores/app'
	import { navigateTo } from '@/utils/util'
	import { computed } from 'vue'

	const props = defineProps({
		content: {
			type: Object,
			default: () => ({})
		},
		styles: {
			type: Object,
			default: () => ({})
		}
	})
	const { getImageUrl } = useAppStore()
	const kefuInfo = computed(() => useAppStore().kefuInfo)
	const handleClick = (item : any) => {
		if (item.link.path === '/bundle/pages/contact_service/index') {
			console.log('客服方式配置值:', kefuInfo.value.way, kefuInfo.value)
			switch (parseInt(kefuInfo.value.way)) {
				case 2:
					// 原微信客服页面跳转，已注释
					// navigateTo(item.link)
					// 改为跳转企业微信客服
					if (!kefuInfo.value.corpId) {
						uni.$u.toast('请在后台配置企业微信信息')
					} else {
						// #ifdef MP-WEIXIN
						// 解构 Proxy 对象，获取原始值
						const { corpId, url } = kefuInfo.value
						console.log('客服参数:', { corpId, url })
						uni.openCustomerServiceChat({
							extInfo: {
								url
							},
							corpId,
							success: (res) => {
								console.log('打开企业微信客服成功', res)
							},
							fail: (err) => {
								console.error('打开企业微信客服失败', err)
								uni.$u.toast('打开企业微信客服失败')
							}
						})
						// #endif
						// #ifndef MP-WEIXIN
						uni.$u.toast('仅支持微信小程序打开企业微信客服')
						// #endif
					}
					break
				case 1:
					if (!kefuInfo.value.phone) {
						uni.$u.toast('请在后台配置客服电话号码')
					} else {
						uni.makePhoneCall({
							phoneNumber: kefuInfo.value.phone
						})
					}
					break
				default:
					break
			}
		} else {
			navigateTo(item.link)
		}
	}
</script>

<style lang="scss"></style>